<template>
  <div class="container-fluid">
    <div class="row school-model school-tiao">
      <div class="col school-tiao-left">
        <span>{{ student.name }}</span> &nbsp;
        <span class="text-primary">({{student.relationship}} : {{student.phonenum}})</span>
      </div>
      <div class="col text-right">
        <a-button-group>
          <a-button type="primary" @click="setaddres2 = true">绑定小程序</a-button>
          <a-button type="primary" @click="setaddress = true">报班</a-button>
          <a-button type="primary">
            <router-link :to="{name:'学员'}" class="text-white">返回</router-link>
          </a-button>
        </a-button-group>
      </div>
    </div>
    <div class="row school-model index-model">
      <div class="col school-col-table">
        <el-tabs type="card" value="班级">
          <el-tab-pane label="班级" name="班级">
            <myclazz
              v-bind="{student, schoolclazzstudentcalendar, getstudentnum, myschoolclazz, clazzbyschooladdresid, totime}"
            ></myclazz>
          </el-tab-pane>
          <el-tab-pane label="课程表" name="课程表">
            <myclassrecords v-bind="{student, myschoolclazz, totime}"></myclassrecords>
          </el-tab-pane>
          <el-tab-pane label="上课记录" name="上课记录">
            <mycurriculum
              v-bind="{student, schoolclazzstudentcalendar, getstudentnum, myschoolclazz, clazzbyschooladdresid, totime}"
            ></mycurriculum>
          </el-tab-pane>
        </el-tabs>
        <el-dialog class="school-form" title="选择报名班级" width="710px" :visible.sync="setaddress">
          <el-table :data="clazzbyschooladdresid" style="width: 100%" max-height="250">
            <el-table-column prop="ID" label="序号" width="60">
              <template slot-scope="scope">
                <input type="checkbox" name="clazzs" :value="scope.row.ID" v-model="clazzs" />
                {{scope.$index+1}}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="班级名称"></el-table-column>
            <el-table-column prop="type" sortable label="人数">
              <template
                slot-scope="scope"
              >{{getstudentnum(scope.row.ID)}} / {{ scope.row.studentnum }}</template>
            </el-table-column>
            <el-table-column prop="info" label="所在校区">
              <template
                slot-scope="scope"
              >{{ getschooladdressbyid( scope.row.schooladdressid).name }}</template>
            </el-table-column>
            <el-table-column prop="studentnum" sortable label="课程">
              <template
                slot-scope="scope"
              >{{ scope.row.schoolcourseid?getschoolcoursebyid( scope.row.schoolcourseid).name:'' }}</template>
            </el-table-column>
            <el-table-column prop="type" sortable label="开班日期">
              <template slot-scope="scope">{{ totime(scope.row.starttime) }}</template>
            </el-table-column>
            <el-table-column prop="studentnum" sortable label="结课日期">
              <template slot-scope="scope">{{ totime(scope.row.endtime) }}</template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              size="mini"
              :disabled="addstudentclazz"
              @click="submitForm2"
            >确 定</el-button>
            <el-button @click="setaddress = false" size="mini">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog
          class="school-form"
          :title="title"
          width="326px"
          @opened="opened"
          :visible.sync="setaddres2"
          center
        >
          <img
            v-show="show"
            src="https://cdn.hterobot.com/vue/school/image/%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg"
            width="276"
          />
          <canvas v-show="!show" id="canvas" width="276" height="276"></canvas>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="show = !show" v-text="show?'下一步':'上一步'"></el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  asyncchangeschoolstudentschoolclazz,
  asyncgetschoolclazzstudentcalendar
} from "../../../../plugins/api.js";
import myclazz from "../myclass/index.vue";
import myclassrecords from "../myclassrecords/index.vue";
import mycurriculum from "../mycurriculum/index.vue";
import { totime } from "../../../utils.js";
import * as qrcode from "qrcode";
export default {
  name: "watchtudent",
  data() {
    return {
      show: true,
      isaddress: true,
      setaddress: false,
      setaddres2: false,
      clazzs: [],
      addressid: null,
      addstudentclazz: false,
      schoolclazzstudentcalendar: [],
      title: "第一步关注公众号"
    };
  },
  async created() {
    this.schoolclazzstudentcalendar = await asyncgetschoolclazzstudentcalendar({
      schoolstudentid: this.ID
    });
  },
  watch: {
    show(v) {
      if (v) {
        this.title = "第一步关注公众号";
      } else {
        this.title = "第二步绑定小程序";
      }
    }
  },
  computed: {
    ...mapGetters([
      "getschoolstudent",
      "getschooladdress",
      "getschoolclazz",
      "getschoolcourse",
      "getschooluser",
      "getschooladdressbyid",
      "getschoolcoursebyid"
    ]),
    clazzbyschooladdresid() {
      const { getschoolclazz, student } = this;
      const { schooladdressid, ID } = student;
      return getschoolclazz.filter(v => {
        if (v.schooladdressid != schooladdressid) return;
        if (v.type == "0") return;
        const n = v.schoolstudentschoolclazz.find(
          vo => vo.type === "在读" && vo.schoolstudentid == ID
        );
        return !n;
      });
    },
    student() {
      return this.getschoolstudent.find(v => v.ID == this.ID);
    },
    myschoolclazz() {
      const { getschoolclazz, student, getschooluser } = this;
      const {
        schooladdressid,
        schoolstudentschoolclazz,
        schoolclazzstudentcalendar
      } = student;
      let teacher1 = getschooluser.find(
        vo => vo.schooladdressid == schooladdressid && vo.isteacher
      );

      if (!teacher1) {
        teacher1 = this.getschooluser.find(vo => vo.isteacher);
      }
      return schoolstudentschoolclazz.map(v => {
        let hour = 0;
        for (const vo of schoolclazzstudentcalendar) {
          if (
            ["上课", "补课"].includes(vo.type) &&
            v.schoolclazzid === vo.schoolclazzschedule.schoolclazzid
          )
            hour += vo.hour;
        }
        const schoolclazz = getschoolclazz.find(vo => vo.ID == v.schoolclazzid);
        const x = {
          ...v,
          teacher: teacher1 ? teacher1.name : "",
          hour,
          schoolclazz
        };
        return x;
      });
    }
  },
  props: ["ID"],
  methods: {
    totime,
    getstudentnum(id) {
      const { schoolstudentschoolclazz } = this.getschoolclazz.find(
        v => v.ID == id
      );
      return schoolstudentschoolclazz.filter(v => v.type === "在读").length;
    },
    async submitForm2() {
      try {
        for (let vo of this.clazzs) {
          await asyncchangeschoolstudentschoolclazz({
            schoolclazzid: vo,
            schoolstudentid: this.ID
          });
        }
        this.clazzs = [];
        await this.$store.dispatch("actionschoolstudent");
        this.$message.success(`添加成功`);
        this.setaddress = false;
      } catch (err) {
        this.$message.error(`失败:${err}`);
      }
    },
    opened() {
      const url = encodeURIComponent(
        "https://www.hterobot.com/wechat/schoolstudentbindwcx"
      );
      qrcode.toCanvas(
        document.getElementById("canvas"),
        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc38a242cea953176&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=${this.ID}#wechat_redirect`
      );
    }
  },
  components: {
    myclazz,
    myclassrecords,
    mycurriculum
  }
};
</script>

<style lang="scss" scoped>
.index-model {
  margin-top: 13px;
}
.checkbox-group {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #ededed;
}
</style>